<script setup>
import { ref, onMounted } from 'vue'

import { ElTable, ElTableColumn, ElSwitch, ElSteps, ElStep, ElTabs, ElTabPane, ElButton, ElInput, ElDivider } from 'element-plus'

//流失审核表格模拟数据
const tableData = [
  {
    date: '百账汇（广州）科技有限公司',
    name: '张小姐匡梦思',
    address: '修改',
  },
  {
    date: '江西省分公司',
    name: '周朵丽',
    address: '修改',
  },
  {
    date: '佛山分公司',
    name: '匡梦思',
    address: '修改',
  },
  {
    date: '百账汇（广州）科技有限公司',
    name: '张小姐匡梦思',
    address: '修改',
  },
  {
    date: '江西省分公司',
    name: '周朵丽',
    address: '修改',
  },
  {
    date: '佛山分公司',
    name: '匡梦思',
    address: '修改',
  }, 
]

//客户标签模拟数据
const categories = [
  {
    id: '1',
    name: '全部标签',
  },
  {
    id: '2',
    name: '账务难度',
  },
  {
    id: '3',
    name: '企业性质',
  },
  {
    id: '4',
    name: '社保情况',
  },
  {
    id: '5',
    name: '企业规模',
  },
  {
    id: '6',
    name: '开票模式',
  },
  {
    id: '7',
    name: '成本费用',
  },
  {
    id: '8',
    name: '跨境电商',
  },
  {
    id: '9',
    name: '国内电商',
  },
  {
    id: '10',
    name: '工商年报',
  },  
  {
    id: '11',
    name: '银行', 
  },
  {
    id: '12',
    name: '企业所得税提醒', 
  },
  {
    id: '13',
    name: '需申报特殊小税种', 
  },
  {
    id: '14',
    name: '服务画像', 
  },
  {
    id: '15',
    name: '增值税税费提醒', 
  },
  {
    id: '16',
    name: '工资申报', 
  },
  {
    id: '17',
    name: '老板价格态度', 
  },     
  {
    id: '18',
    name: '税控盘', 
  },
  {
    id: '19',
    name: '公积金', 
  },
]

//物品接收流程多选框
const checkboxGroup1 = ref([])
//物品归还流程多选框
const checkboxGroup2 = ref([])
//物品归还单选框
const radio = ref('1')

//选项值设置内标签页状态
const activeName2 = ref('firstB') 
const activeName2A = ref('1')

//选项值设置内客户片区渲染数组
const regions = [
  {
    id: '1',
    name: '1',
    value: '华南片区',
  },
  {
    id: '2',
    name: '2',
    value: '华东片区',
  },
]
//选项值设置内客户等级渲染数组 
const ranks = [
  {
    id: '1',
    name: '1',
    value: '一般客户',
  },
  {
    id: '2',
    name: '2',
    value: '重要客户',
  },
  {
    id: '3',
    name: '3',
    value: 'VIP客户',
  },
  {
    id: '4',
    name: '4',
    value: '特殊客户',   
  },
]
//选项值设置内流失原因渲染数组
const reasons = [
  {
    id: '1',
    name: '1',
    value: '公司注销',
  },
  {
    id: '2',
    name: '2',
    value: '服务不满、换代账',
  },
  {
    id: '3',
    name: '3',
    value: '其他原因',
  },
  {
    id: '4',
    name: '4',
    value: '公司搬迁',   
  },
  { 
    id: '5',  
    name: '5',
    value: '更换代账公司',
  },
  {
    id: '6',
    name: '6',
    value: '自己招聘了会计',
  },
  {
    id: '7',
    name: '7',
    value: '停帐',
  },
  {
    id: '8',
    name: '8',
    value: '价格不满，换代账',
  },
]

//选项值客户来源表格模拟数据
const resourseData = [
  {
    resourse: '邹辉龙',
    twooption: '不需要',
    use: '启用',
    operation: '编辑',
  },
  {
    resourse: '匡英武',
    twooption: '不需要',
    use: '启用',
    operation: '编辑',
  },
  {
    resourse: '邓杰',
    twooption: '不需要',
    use: '启用',
    operation: '编辑',
  },
  {
    resourse: '左稻',
    twooption: '不需要',
    use: '启用',
    operation: '编辑',
  },
  {
    resourse: '潘石梅',
    twooption: '选择渠道',
    use: '启用',
    operation: '编辑',
  },
  {
    resourse: '朱锡康',
    twooption: '不需要',
    use: '启用',
    operation: '编辑',
  }  
]

//选项值设置内工作进度渲染数组
const progresses = [
  {
    id: '1',
    name: '1',
    value: '打印凭证',
  },
  {
    id: '2',
    name: '2',
    value: '装订凭证',
  },
]
// 侧边标签页状态
const activeName = ref('firstA')
// 顶部标签页状态
const activeName1 = ref('first1');
const activepicture = ref('1');

//客户画像字段表格模拟数据
const feildData = [
  {
    feildname: '人员规模',
    feildtype: '单极选项值',
    description: '',
    usestatus: '启用',
    operation: '编辑',
  },
  {
    feildname: '参保人数',
    feildtype: '整数',
    description: '',
    usestatus: '启用',
    operation: '编辑',
  },
  {
    feildname: '固定资产情况',
    feildtype: '单极选项值',
    description: '',
    usestatus: '启用',
    operation: '编辑',
  },
  {
    feildname: '注册地址是否挂靠',
    feildtype: '单极选项值',
    description: '',
    usestatus: '启用',
    operation: '编辑',
  },
  {
    feildname: '实际办公地点',
    feildtype: '文本',
    description: '',
    usestatus: '启用',
    operation: '编辑',
  },
  {
    feildname: '办公场地面积',
    feildtype: '单极选项值',
    description: '',
    usestatus: '启用',    
    operation: '编辑',
  },
]

//定义客户画像业务信息分类标签页渲染数组
const businesses = [
  {
    id: '1',
    name: '经营情况',
  },
  {
    id: '2',
    name: '关键决策人',
  },
  {
    id: '3',  
    name: '价值贡献',
  },
] 

//定义客户服务档案分类标签页渲染数组
const services = [
  {
    id: '1',
    name: '基础信息',
  },
  {
    id: '2',
    name: '财务处理信息',
  },
  {
    id: '3',  
    name: '税务处理信息',
  },
  {
    id: '4',
    name: '票据处理信息',
  },
]   
</script>
<template>
  <div class="customer-setting">
      <div class="">
          <el-tabs v-model="activeName1" class="demo-tab" @tab-click="handleClick">
              <el-tab-pane label="流程设置" name="first1">
                <div class="table-area">
                  <div class="process-item">
                    <!-- 左菜单 -->
                    <div class="process-item-left">
                      <el-tabs tab-position="left" v-model="activeName">
                        <el-tab-pane label="流失审核流程" name="firstA">
                          <div class="process-item-area">
                          <!-- 中左步骤条 -->
                            <div class="process-item-midden">
                              <div style="height: 300px; max-width: 600px; margin-left: 60px; margin-top: 40px;">
                                <el-steps direction="vertical" :active="2">
                                  <el-step title="提交申请" />
                                  <el-step title="主管审核" />
                                  <el-step title="财务审核" />
                                  <el-step title="流失审核" />
                                </el-steps>
                              </div>
                            </div>
                            <!-- 右侧栏 -->
                            <div class="process-item-right">
                              <!-- <div> -->
                                <br>
                                <br>
                                <p>提出流失申请</p>
                                <br>
                                <br>
                                <div class="line"></div>
                                <br>                
                                <el-switch
                                  v-model="value1"
                                  :loading="loading1"
                                  :before-change="beforeChange1"
                                />
                                <p>可指定人员拥有审核权限，按提交人的所属部门来确定审核人。</p>
                                <br>
                                <div class="line"></div>
                                <br>
                                <el-switch
                                  v-model="value1"
                                  :loading="loading1"
                                  :before-change="beforeChange1"
                                />
                                <p>可指定人员拥有财务审核权限，按提交人的所属部门来确定审核人。</p>
                                <br>
                                <div class="line"></div>
                                <br>
                                <p>可指定人员拥有流失审核权限，按提交人的所属部门来确定审核人。</p>
                                <br>
                                <el-table :data="tableData" style="width: 100%;" border height="250">
                                  <el-table-column prop="date" label="审核权限范围" width="300" />
                                  <el-table-column prop="name" label="审核人" width="300" />
                                  <el-table-column prop="address" label="操作" />
                                </el-table>
                                <br>
                              <!-- </div> -->
                            </div>
                          </div>  
                        </el-tab-pane>
                        <el-tab-pane label="物品接收流程" name="secondA">
                          <div class="process-item-area">
                          <!-- 中左步骤条 -->
                            <div class="process-item-midden">
                              <div style="height: 300px; max-width: 600px; margin-left: 60px; margin-top: 40px;">
                                <h4 style="margin-bottom: 44px; margin-right: 11px;">
                                  开启流程管理
                                </h4>
                                <el-steps direction="vertical" :active="2">
                                  <el-step title="提交申请" />
                                  <el-step title="接收审核" />
                                </el-steps>
                              </div>
                            </div>
                            <!-- 右侧栏 -->
                            <div class="process-item-right">
                              <div>
                                <br>
                                <br>
                                <el-switch
                                  v-model="value1"
                                  :loading="loading1"
                                  :before-change="beforeChange1"
                                />
                                <br>
                                <br>
                                <br>                
                                <p>有客户查询权限的员工可发起提交</p>
                                <p>接收单提交前需要校验的必填项</p>
                                <br>
                                <br>
                                <el-form>
                                  <el-form-item>
                                    <el-checkbox-group v-model="checkboxGroup1">
                                      <el-checkbox label="客户名称" />
                                      <el-checkbox label="接收日期" />
                                      <el-checkbox label="接收编号" />
                                      <el-checkbox label="接收人" />
                                      <el-checkbox label="移交人" />
                                      <el-checkbox label="物品名称" />
                                      <el-checkbox label="存放位置" />
                                      <el-checkbox label="移交人电话" />
                                      <el-checkbox label="快递单号" />
                                      <el-checkbox label="物品备注" />
                                      <el-checkbox label="接收资料附件" />
                                    </el-checkbox-group>
                                  </el-form-item>  
                                </el-form>
                                <br>
                                <br>
                                <p>可指定人员拥有财务审核权限，按提交人的所属部门来确定审核人。</p>
                                <br>
                                <el-table :data="tableData" style="width: 100%" border height="250">
                                  <el-table-column prop="date" label="审核权限范围" width="300" />
                                  <el-table-column prop="name" label="审核人" width="300" />
                                  <el-table-column prop="address" label="操作" />
                                </el-table>
                                <br>
                              </div>
                            </div>
                          </div>  
                        </el-tab-pane>
                        <el-tab-pane label="物品归还流程" name="thirdA">
                          <div class="process-item-area">
                          <!-- 中左步骤条 -->
                            <div class="process-item-midden">
                              <div style="height: 300px; max-width: 600px; margin-left: 60px; margin-top: 40px;">
                                
                                <el-steps direction="vertical" :active="2">
                                  <el-step title="提交申请" />
                                  <el-step title="归还确认" />
                                </el-steps>
                              </div>
                            </div>
                            <!-- 右侧栏 -->
                            <div class="process-item-right">
                              <div>
                                <br>
                                <br>                               
                                <p>有客户查询权限的员工可发起提交</p>
                                <p>归还单提交前需要校验的必填项</p>
                                <br>
                                <br>
                                <el-form>
                                  <el-form-item>
                                    <el-checkbox-group v-model="checkboxGroup2">
                                      <el-checkbox label="客户名称" />
                                      <el-checkbox label="归还日期" />
                                      <el-checkbox label="归还编号" />
                                      <el-checkbox label="移交人" />
                                      <el-checkbox label="接收人" />
                                      <el-checkbox label="物品名称" />
                                      <el-checkbox label="存放位置" />
                                      <el-checkbox label="接收人电话" />
                                      <el-checkbox label="快递单号" />
                                      <el-checkbox label="物品备注" />
                                      <el-checkbox label="接收资料附件" />
                                    </el-checkbox-group>
                                  </el-form-item>  
                                </el-form>
                                <br>
                                <br>
                                <br>
                                <br>
                                <br>
                                <br>
                                <el-radio-group v-model="radio">
                                  <el-radio value="1" name="type">
                                            移交人确认
                                  </el-radio>
                                  <el-radio value="2" name="type">
                                            保管人确认 
                                  </el-radio>
                                </el-radio-group>
                              </div>
                            </div>
                          </div>  
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="选项值设置" name="second">  
                <div class="table-area">
                  <div class="process-item">
                    <el-tabs tab-position="left" v-model="activeName2" style="width: 100%; overflow: auto;">
                      <el-tab-pane label="客户标签" name="firstB" >
                        <el-button disabled style="margin: 5px 5px 0 30px">
                          添加分类
                        </el-button>
                        <el-tabs tab-position="left" v-model="activeName2A" style="overflow: auto;">
                          <el-tab-pane 
                          :name="category.id"
                          :label="category.name"
                          v-for="category in categories"
                          :key="category.id"   
                          >
                            <!-- <div class="process-item-area"> -->
                              <div class="process-item-top">
                                <el-input
                                  v-model="category.name"
                                  placeholder="请输入分类名称"
                                  size="mini"
                                  style="width: 200px;"
                                />
                                <el-button disabled>
                                  添加分类
                                </el-button>
                              </div>
                              <el-table :data="tableData" style="width: 100%" border>
                                <el-table-column prop="date" label="审核权限范围" width="300" />
                                <el-table-column prop="name" label="审核人" width="300" />
                                <el-table-column prop="address" label="操作" />
                              </el-table>    
                            <!-- </div> -->
                          </el-tab-pane>
                        </el-tabs>
                      </el-tab-pane>
                      <el-tab-pane label="客户片区" name="secondB">
                        <el-form>
                          <el-button disabled style="margin: 5px 5px 15px 30px">
                            添加选项
                          </el-button>
                          <el-form-item 
                          v-for="region in regions"
                          :key="region.id"
                          :label="region.name"
                          class="process-item-flex"
                          >
                            <el-input
                            v-model="region.value"
                            placeholder="请输入选项值"
                            class="process-item-flex-input"
                            >                     
                            </el-input>
                          </el-form-item>
                        </el-form>
                      </el-tab-pane>
                      <el-tab-pane label="客户等级" name="thirdB">
                        <el-form>
                          <div class="process-item-top">
                            <el-button disabled style="margin: 5px 5px 15px 30px">
                            添加选项
                          </el-button>
                          <p>
                            提示：选择颜色后，将在“微企服”上区分展示
                          </p>
                          </div>
                          <el-form-item 
                          v-for="rank in ranks"
                          :key="rank.id"
                          :label="rank.name"
                          class="process-item-flex"
                          >
                            <el-input
                            v-model="rank.value"
                            placeholder="请输入选项值"
                            class="process-item-flex-input"
                            >                     
                            </el-input>
                          </el-form-item>
                        </el-form>
                      </el-tab-pane>
                      <el-tab-pane label="流失原因" name="forthB">
                        <el-form>
                          <el-button disabled style="margin: 5px 5px 15px 30px">
                            添加选项
                          </el-button>                    
                          <el-form-item 
                          v-for="reason in reasons"
                          :key="reason.id"
                          :label="reason.name"
                          class="process-item-flex"
                          >
                            <el-input
                            v-model="reason.value"
                            placeholder="请输入选项值"
                            class="process-item-flex-input"
                            >                     
                            </el-input>
                          </el-form-item>
                        </el-form>
                      </el-tab-pane>  
                      <el-tab-pane label="客户来源" name="fifthB">
                        <el-button disabled style="margin: 5px 5px 10px 12px">
                          添加来源
                        </el-button>
                        <el-table :data="resourseData" style="width: 100%" border>
                          <el-table-column type="index" width="50" />
                          <el-table-column prop="resourse" label="来源" width="300" />
                          <el-table-column prop="twooption" label="二级选择" width="300" />
                          <el-table-column prop="use" label="启用" />
                          <el-table-column prop="operation" label="操作" />
                        </el-table>   
                      </el-tab-pane>  
                      <el-tab-pane label="云盘文件夹" name="sixthB">
                        <div class="process-item-top">
                          <p>
                            "拖动整行，可调整菜单显示顺序"
                          </p>
                          <el-button disabled style="margin: 5px 5px 15px 30px">
                            新建文件夹
                          </el-button>      
                        </div>
                        <el-table :data="resourseData" style="width: 100%">
                          <el-table-column type="index" width="50" />
                          <el-table-column prop="resourse" label="来源" width="300" />
                          <el-table-column prop="twooption" label="二级选择" width="300" />
                          <el-table-column prop="use" label="启用" />
                          <el-table-column prop="operation" label="操作" />
                        </el-table>   
                      </el-tab-pane>  
                      <el-tab-pane label="工作进度" name="seventhB">
                        <el-form>
                          <el-button type="primary" style="margin: 5px 5px 15px 30px">
                            添加选项
                          </el-button>
                          <el-form-item 
                          v-for="progress in progresses"
                          :key="progress.id"
                          :label="progress.name"
                          class="process-item-flex"
                          >
                            <el-input
                            v-model="progress.value"
                            placeholder="请输入选项值"
                            class="process-item-flex-input"
                            >                     
                            </el-input>
                          </el-form-item>
                        </el-form>
                      </el-tab-pane>  
                      <el-tab-pane label="物品交接" name="eighthB">
                            12421
                      </el-tab-pane>  
                    </el-tabs>
                  </div>         
                </div>
              </el-tab-pane>
              <el-tab-pane label="权限设置" name="third">  
                <div class="table-area1">
                  <el-card>
                    <div class="custom-pane1">
                      <p>
                        新增/导入客户
                      </p>
                      <el-switch
                        v-model="value1"
                        :loading="loading1"
                        :before-change="beforeChange1"
                      />
                    </div> 
                    <br>
                    <div class="line"></div>
                    <br>
                    <div class="custom-pane1">
                      <p>
                        导出客户
                      </p>
                      <p class="custom-pane1-p">
                        默认仅机构负责人拥有导出客户权限，也可以指定其他人。
                      </p>
                    </div> 
                    <br>
                    <br>
                    <div class="custom-pane1">
                      <p class="custom-pane1-p">
                        张小姐   匡梦思 曾子晴 
                      </p>
                    </div>
                    <br>
                    <br>
                    <div class="line"></div>
                    <br>
                    <div class="custom-pane1">
                      <p>
                        导入物品
                      </p>
                      <el-switch
                        v-model="value1"
                        :loading="loading1"
                        :before-change="beforeChange1"
                      />
                      <p class="custom-pane1-p">
                        开启后仅指定的人员拥有该权限，其他人无法导入物品。
                      </p>
                    </div> 
                    <br>
                    <div class="line"></div>
                    <br>
                    <div class="custom-pane1">
                      <p>
                        导出物品
                      </p>
                      <p>
                        默认机构负责人员拥有导出物品权限，也可指定其他人
                      </p>
                    </div>
                    <br>
                    <br>
                    <div class="custom-pane1">
                      <p class="custom-pane1-p">
                      张小姐 
                    </p>
                    </div>
                    <br>
                    <br>
                    <div class="line"></div>
                    <br>
                    <div class="custom-pane1">
                      <p>
                        删除客户到回收站
                      </p>
                      <el-switch
                        v-model="value1"
                        :loading="loading1"
                        :before-change="beforeChange1"
                      />
                      <p class="custom-pane1-p">
                        关闭时，有客户编辑权限的人可删除客户到回收站；开启后，仅指定的人员拥有删除客户到回收站的权限。
                      </p>
                    </div> 
                    <br>
                    <div class="line"></div>
                    <br>
                    <div class="custom-pane1">
                      <p>
                        删除物品到回收站
                      </p>
                      <p class="custom-pane1-p">
                        指定的人员拥有该权限
                      </p>
                      </div>
                      <br>
                      <br>
                      <div class="custom-pane1">
                        <p class="custom-pane1-p">
                        张小姐   匡梦思 曾子晴 
                      </p>
                      </div>                      
                      <br>
                      <br>
                      <div class="line"></div>
                      <br>
                      <div class="custom-pane1">
                        <p>
                          客户信息必填项
                        </p>
                        <el-switch
                          v-model="value1"
                          :loading="loading1"
                          :before-change="beforeChange1"
                        />
                        <p class="custom-pane1-p">
                          可设置新建/编辑客户时需要校验的必填项
                        </p>
                      </div> 
                      <br>
                      <div class="line"></div>
                      <br>
                      <div class="custom-pane1">
                        <p>
                          签订合同后才能分配会计
                        </p>
                        <el-switch
                          v-model="value1"
                          :loading="loading1"
                          :before-change="beforeChange1"
                        />
                        <p class="custom-pane1-p">
                          可设置新建/开启后，只有签订了代账业务合同的客户才可以分配代账服务人员，包含服务顾问、账务会计、税务会计、审核会计。
                        </p>
                      </div> 
                      <br>
                      <div class="line"></div>
                      <br>
                      <div class="custom-pane1">
                        <p>
                          客户暂停/恢复
                        </p>
                        <el-switch
                          v-model="value1"
                          :loading="loading1"
                          :before-change="beforeChange1"
                        />
                        <p class="custom-pane1-p">
                          可设置新建/开启后，只有指定人员可以操作客户的暂停服务和恢复服务。
                        </p>
                      </div>  
                      <br>
                      <div class="line"></div>
                      <br>
                      <div class="custom-pane1">
                        <p>
                          代账工作分配
                        </p>
                        <el-radio-group v-model="radio">
                          <el-radio value="1" name="type">
                            有客户编辑或工作交接权限即可操作分配
                          </el-radio>
                          <el-radio value="2" name="type">
                            指定人员分配 
                          </el-radio>
                        </el-radio-group>
                      </div>  
                      <br>
                      <div class="line"></div>
                      <br>
                      <br>
                      <div class="custom-pane1">
                        <p>
                          客户编号重复校验
                        </p>
                        <el-switch
                          v-model="value1"
                          :loading="loading1"
                          :before-change="beforeChange1"
                        />
                        <p class="custom-pane1-p">
                          开启后，重复的客户编号不可录入。
                        </p>
                      </div>  
                      <br>
                      <div class="line"></div>
                      <br>
                      <div class="custom-pane1">
                        <p>
                          查看流失进度
                        </p>
                        <el-switch
                          v-model="value1"
                          :loading="loading1"
                          :before-change="beforeChange1"
                        />
                        <p class="custom-pane1-p">
                          开启后，有客户查询/编辑权限的人也能查看流失审核进度。
                        </p>
                      </div>  
                      <br>
                  </el-card>    
                </div>
              </el-tab-pane>
              <el-tab-pane label="客户画像设置" name="forth">  
                <div class="table-area">
                  <el-tabs v-model="activepicture">
                    <el-tab-pane label="业务信息" name="1">
                      <div class="custom-pane">
                        <el-button disabled style="margin: 0px 3px 10px 60px; width: 100px;">
                          添加来源
                        </el-button>
                        <el-tabs tab-position="left">
                          <el-tab-pane
                          v-for="business in businesses"
                          :key="business.id"
                          :label="business.name"
                          >
                            <div class="custom-pane-right">
                              <el-form class="custom-pane-right-top">
                                <!-- <div class="custom-pane-right-top"> -->
                                  <el-form-item style="margin-top: 18px;">
                                    <el-input v-model="inputValue" placeholder="请输入字段"></el-input>  
                                  </el-form-item>
                                  <el-form-itm>
                                    <el-button disabled>
                                      添加字段
                                    </el-button>
                                  </el-form-itm>  
                                <!-- </div> -->
                              </el-form>  
                              <el-form>
                                <el-table :data="feildData" style="width: 100%" border>
                                    <el-table-column type="index" width="50" />
                                    <el-table-column prop="feildname" label="字段名称" width="300" />
                                    <el-table-column prop="feildtype" label="字段类型" width="300" />
                                    <el-table-column prop="description" label="字段描述" />
                                    <el-table-column prop="usestatus" label="启用状态" />
                                    <el-table-column prop="operation" label="操作" />
                                  </el-table>
                              </el-form>                    
                            </div>
                          </el-tab-pane>
                        </el-tabs>
                      </div>
                    </el-tab-pane>
                    <!-- <el-divider direction="vertical" /> -->
                    <el-tab-pane label="服务档案" name="2">
                      <div class="custom-pane">
                        <el-button disabled style="margin: 0px 3px 10px 60px; width: 100px;">
                          添加来源
                        </el-button>
                        <el-tabs tab-position="left">
                          <el-tab-pane
                          v-for="service in services"
                          :key="service.id"
                          :label="service.name"
                          >
                            <div class="custom-pane-right">
                              <el-form class="custom-pane-right-top">
                                <!-- <div class="custom-pane-right-top"> -->
                                  <el-form-item style="margin-top: 18px;">
                                    <el-input v-model="inputValue" placeholder="请输入字段"></el-input>  
                                  </el-form-item>
                                  <el-form-itm>
                                    <el-button disabled>
                                      添加字段
                                    </el-button>
                                  </el-form-itm>  
                                <!-- </div> -->
                              </el-form>  
                              <el-form>
                                <el-table :data="feildData" style="width: 100%" border>
                                    <el-table-column type="index" width="50" />
                                    <el-table-column prop="feildname" label="字段名称" width="300" />
                                    <el-table-column prop="feildtype" label="字段类型" width="300" />
                                    <el-table-column prop="description" label="字段描述" />
                                    <el-table-column prop="usestatus" label="启用状态" />
                                    <el-table-column prop="operation" label="操作" />
                                  </el-table>
                              </el-form>                    
                            </div>
                          </el-tab-pane>
                        </el-tabs>
                      </div>
                    </el-tab-pane>  
                  </el-tabs>
                </div>
              </el-tab-pane>
          </el-tabs>
      </div>     
  </div>
</template>
<style lang="less" scoped>
.customer-setting {
  width: 100%;
  height: 100%;
  background-color: rgb(239,239,239);
  .table-area1 {
    width: 94%;
    height: 43vw;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;    
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    .line {
            height: 1px;
            background-color: #ccc;
    }
    .custom-pane1 {
      margin-left: 50px;
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 100%;
      gap: 30px;
      align-items: center;
      .custom-pane1-p {
        font-size: small;
      }
    }
  }
  .table-area {
    width: 94%;
    height: 43vw;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;    
    padding: 10px 20px;
    box-sizing: border-box;
    .line {
            height: 1px;
            background-color: #ccc;
    }
    .custom-pane {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      background-color: #ffffff;    
      :deep(.el-tabs__item) {
        margin-left: 40px;    
        padding-right: 50px;
        font-size: medium;
      }

      .custom-pane-left {
          width: 20%;
          height: 600px;
          background-color: #ffffff;
          border-right: 1px solid #b3aeae;
          
      }
      .custom-pane-right {
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: #ffffff;
        .custom-pane-right-top {
          width: 100%;
          height: 50px;
          background-color: #ffffff;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
        }
        .custom-pane-right-bottom {
          width: 100%;
          height: 100%;
        
        }
      } 
        // .custom-row {
        //   display: flex;
        //   flex-direction: column;
        //   width: 18%;
        //   height: 100%;
        //   align-items: center;
        //   .el-button {             
        //     margin-top: 10px;
        //     margin-bottom: 10px;
        //   }
        // }
    }
    .process-item {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 100%;
      :deep(.el-tabs__item) {
        margin-left: 10px;    
        padding-right: 14px;
        font-size: medium;
      }
      .process-item-flex {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        overflow: auto;
        padding: 5px 0 5px 0;
        margin: 0;
        border-bottom: 0.5px solid #b3aeae;
        border-top: 0.5px solid #b3aeae;
        cursor: pointer;
        :hover {
            background-color: #f0f7ff; /* 浅蓝色背景 */
            transition: background-color 0.3s ease; /* 平滑过渡效果 */
          }
        .process-item-flex-input {
          width: 70%;
          height: 100%;
        }
      }
      .process-item-top {
        width: 100%;
        height: 60px;
        background-color: #ffffff;
        border-bottom: 1px solid #b3aeae;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        
      }
      .process-item-left {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      // border-right: 2px solid #b2b2b2;
      :deep(.el-tabs__item) {
        margin-left: 10px;    
        padding-right: 14px;
        font-size: medium;
      }
      :deep(.el-tabs__header) {
        background-color: #fff;  
      }
      } 
      .process-item-area {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        overflow: auto; 
        .process-item-midden {
        width: 17%;
        height: 100%;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        }
        .process-item-right {
        width: 70%;
        height: 80%;
        background-color: #ffffff;
        margin-left: 20px;
          .line {
            height: 1px;
            background-color: #ccc;
          }
        }
      }
    }
  }
}
.top-filter {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9;
    
}
.demo-tab { 
        :deep(.el-tabs__item) {
            margin-left: 30px;    
            padding: 0; 
            font-size: medium;
        }
        :deep(.el-tabs__header) {
            background-color: #fff;  
        }
    }
.table-area {
    width: 94%;
    height: 43vw;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    .custom-row {
        display: flex;
        flex-direction: column;
        width: 18%;
        height: 100%;
        align-items: center;
        .el-button {
            
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
}
</style>
